<template>
  <div class="loginWrapt">
    <el-row>
      <el-col :span="24">
        <div class="login">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <div class="title">
              <img src="../../assets/logo/byyl-logo1.png" class="logo-img">
            </div>
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入手机号">
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              >
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
              </el-input>
            </el-form-item>
            <div style="width:100%;">
              <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;" checked>记住我</el-checkbox>
              <!--<a href="#" class="rememberPass">忘记密码</a>-->
            </div>
            <el-form-item style="width:100%;">
              <el-button
                :loading="loading"
                size="medium"
                type="primary"
                style="width:100%;"
                @click.native.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
            <!--  底部  -->
            <div class="el-login-footer">
              <div>
                <span>帮助</span>
                <span>隐私</span>
                <span>条款</span>
              </div>
              <div>Copyright©2022 白医医疗技术部出品</div>
              <div style="text-align: center;">
                <b style="color:#939393;margin-top: 10px;">
                  吉ICP备2020006860号-1</b>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px;">
                  <img src="../../assets/images/beian.png"/>
                  <b style="color:#939393;line-height: 20px;margin-left: 3px;">
                    吉公网安备 22010202001062号</b>
                </div>
              </div>
            </div>

          </el-form>

        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import Cookies from "js-cookie";
  import {encrypt, decrypt} from '@/utils/jsencrypt'
  import {login,getVersion,getXpVersion} from '@/api/login'

  export default {
    name: "Login",
    data() {
      return {
        offsetVale: 1,
        agree: '',
        codeUrl: "",
        cookiePassword: "",
        loginForm: {
          // username: "18704393553",
          // password: "123456",
          username: "",
          password: "",
          rememberMe: true,
          agree: false,
          uuid: ""
        },
        loginRules: {
          username: [
            {required: true, trigger: "blur", message: "用户名不能为空"}
          ],
          password: [
            {required: true, trigger: "blur", message: "密码不能为空"}
          ],
          code: [{required: true, trigger: "change", message: "验证码不能为空"}]
        },
        loading: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getBrowseVersion();
      this.getCookie();
    },
    methods: {
      async getServerVersion(AnalyzePath){
        // 获得软件系统版本号
        let response ;
        await getVersion().then(resp=>{
          console.log(resp,"version");
          response = resp;
        });
        // 开始验证是否更新
        if(response.code==0){
          let result = response.data;
          if(result.versionCode>AnalyzePath){
            console.log("..........需要更新............."+result.path);
            this.BeginUpdate(result.versionCode,result.path).then(function (result2) {
              let state=result2.substr(0,1);            //状态，0-错误，1-正雀，2-系统安装错误
              let AnalyzePath=result2.substr(2);        //错误
              console.log(state,"更新状态");
            });
          }
        }
      },
      async getXPServerVersion(AnalyzePath){
        // 获得软件系统版本号
        let response ;
        await getXpVersion().then(resp=>{
          console.log(resp,"version");
          response = resp;
        });
        // 开始验证是否更新
        if(response.code==0){
          let result = response.data;
          if(result.versionCode>AnalyzePath){
            console.log("..........XP浏览器需要更新............."+result.path);
            /*this.BeginUpdate(result.versionCode,result.path).then(function (result2) {
              let state=result2.substr(0,1);            //状态，0-错误，1-正雀，2-系统安装错误
              let AnalyzePath=result2.substr(2);        //错误
              console.log(state,"更新状态");
            });*/
          }
        }
      },
      getOsVersionMethodCheck(){
        try{
          if(window.getOsVersion && typeof(getOsVersion) == "function"){
            console.log("getOsVersion存在这个方法")
            return true;
          }else{
            console.log("getOsVersion不存在这个方法")
            return false;
          }
        }catch(e){
          console.log("方法不存在");
          return false;
        }
      },
      async getBrowseVersion(){
        // 是否存在查看操作系统的方法
        let checkOsVersionMethod = this.getOsVersionMethodCheck();
        console.log("checkOsVersionMethod->",checkOsVersionMethod)
        let that = this
        if(checkOsVersionMethod){
          // 存在这个方法
          let osVersion = await this.myBrowser.getOsVersion(osVersion=> {    //取得浏览器版本号
            return osVersion;
          });
          console.log("操作系统版本-》osVersion->",osVersion)
          // 获得浏览器版本
          window.getVersion(function (result) {    //取得浏览器版本号
            let state=result.substr(0,1);            //状态，0-错误，1-正雀，2-系统安装错误
            let AnalyzePath=result.substr(2);        //版本号
            console.log("浏览器更新---->返回值【0-参数错误；1-正确，版本号，2-系统安装错误】当前返回值="+result);
            console.log("浏览器当前版本号：version=",AnalyzePath);
            if (osVersion == '1-WinXp' || osVersion == '1-WinVista') {
              console.log("winXp更新检测");
              that.getXPServerVersion(AnalyzePath)
            }else{
              console.log("<===================win7及其以上版本自动更新=====================>")
              console.log(AnalyzePath,"浏览器当前版本号：version");
              that.getServerVersion(AnalyzePath)
            }
          });
        }else{
          // 更新到win7版本
          // 获得浏览器版本
          window.getVersion(function (result) {    //取得浏览器版本号
            let state=result.substr(0,1);            //状态，0-错误，1-正雀，2-系统安装错误
            let AnalyzePath=result.substr(2);        //版本号
            console.log("---老版本浏览器更新----");
            console.log("浏览器当前版本号：version=",AnalyzePath);
            console.log("<===================win7及其以上版本自动更新=====================>")
            console.log(AnalyzePath,"浏览器当前版本号：version");
            that.getServerVersion(AnalyzePath)
          });
        }
      },
      clickNavigation() {
        this.msgError("请先进行登录后才能操作功能！！！");
      },
      clickItem(e) {
        e === this.agree ? this.agree = '' : this.agree = e
      },
      getCookie() {
        const username = Cookies.get("username-center");
        //const password = Cookies.get("password-center");
        const rememberMe = Cookies.get('rememberMe-center')
        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          // password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        };
      },
      handleLogin() {
        let that = this;
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            Cookies.set("username-center", this.loginForm.username, {expires: 60 * 24 * 10 * 365});
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username-center", this.loginForm.username, {expires: 60 * 24 * 10 * 365});
              //Cookies.set("password-center", encrypt(this.loginForm.password), {expires: 60*24*10*365});
              Cookies.set('rememberMe-center', this.loginForm.rememberMe, {expires: 60 * 24 * 10 * 365});
            } else {
              Cookies.remove("username-center");
              //Cookies.remove("password-center");
              Cookies.remove('rememberMe-center');
            }

            login(this.loginForm.username, this.loginForm.password).then(response => {
              console.log('-------------登录返回对象--------');
              console.log(response);
              this.loading = false;
              if(response.code==0){
                this.loading = false;
                //auditStatus 审核状态 0 待审核 1 成功 2驳回   quickRole角色
                let resUser = response.data;
                // this.setToken(resUser.token,{expires: 60*24*10*365});
                this.setToken(resUser.token);
                let {token,refreshToken,expireTtl} = resUser;
                let refreshTokenObject = {token,refreshToken,expireTtl}
                console.log("refreshTokenObject---->",refreshTokenObject);
                this.setJsonObjectToLocal(window.sessionStorage,this.$CONSTANT.REFRESH_TOKEN,refreshTokenObject);
                location.href="/";
              }
            }).catch(() => {
              this.loading = false;
            });
          }
        });
      }
    }
  };
</script>

<style>
  .loginWrapt {
   margin-top: 100px;
  }

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /*background-image: url("../../assets/images/login-background.jpg");*/
    background-size: cover;
    width: 100%;
    margin-top: 50px;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .title .logo-img {
    width: 200px;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

  }

  .login-form .input-icon {
    height: 10px;
    width: 5px;
    margin-left: 2px;
  }

  .login-form .el-input {
    height: 38px;
  }

  .login-form .el-input input {
    height: 38px;
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 38px;
    float: right;
  }

  .login-code img {
    cursor: pointer;
    vertical-align: middle;
  }


  .el-login-footer {
    margin: 50px 0px;
    height: 60px;
    /*
    line-height: 40px;
    position: fixed;
     bottom: 0;
     color: #fff;*/
    width: 100%;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .el-login-footer div {
    padding-bottom: 10px;
  }

  .el-login-footer div span {
    margin-right: 20px;
  }

  .login-code-img {
    height: 38px;
  }

  .rememberPass {
    font-size: 14px;
    float: right;
    color: #409EFF;
    text-decoration: none;
  }

  .navigationDiv {
    text-align: center;
    background-color: white;
    height: 150px;
    padding-top: 10px;
  }

  .navigationDiv .navigationSvn {
    font-size: 100px;
    line-height: 150px
  }

  .navigationDiv .navigationTitle {
    font-size: 20px;
    font-weight: bold;
    color: #5B5B5B;
    padding-top: 10px;
  }
</style>
